<!DOCTYPE html>
<html lang="zh-CN" ng-app="share">

	<head>
		<meta charset='utf-8' />
		<meta name="viewport" content="width=device-width">
		<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
		<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script>
<script type="text/javascript" src="/static/js/ws4redis.js"></script>

<script type="text/javascript">
		id='{{id}}'
		$(function () {
			vm=new Vue({
				el:'#talk',
				data:{
					msgs:[],
					users:[],
					crt_msg:'',
					name:'your name',
					status:'',
				},
				methods:{
					send:function () {
						var post_data=[{fun:'publish_msg',msg:JSON.stringify({name:this.name,content:this.crt_msg})}]
						$.post('?fun=publish_msg',JSON.stringify(post_data))
						this.crt_msg=''
					}
				},
				watch: {
					'name':function () {
						if(this.change_name_clock){
							clearTimeout(this.change_name_clock);
						}
						this.change_name_clock =setTimeout(notify_refresh_user, 3000);
					}
				}
			})
		})
		function notify_refresh_user() {
			var post_data=[{fun:'notify_refresh_user',id:id,name:vm.name}]
			$.post('?fun=notify_refresh_user',JSON.stringify(post_data))
			
		}
		
		setInterval(function () {
			notify_refresh_user()
		}, 20*1000);
		setInterval(function () {
			var del_ls =[]
			for(i in vm.users){
				var user = vm.users[i]
				if(!user.online){
					del_ls.push(user)
				}else{
					user.online=false
				}
			}
			for(i in del_ls){
				vm.users.$remove(del_ls[i])
			}
		},25*1000)
	</script>


	<script type="text/javascript">

	jQuery(document).ready(function($) {
    var ws4redis = WS4Redis({
        uri: 'ws://{{site_url}}/ws/talk?subscribe-broadcast&publish-broadcast&echo',
        //connecting: on_connecting,
        connected: on_connected,
        receive_message: receiveMessage,
        disconnected: on_disconnected,
        heartbeat_msg: '--heartbeat--',
    });

 
    function on_connected() {
        //ws4redis.send_message('Hello');
        vm.status='connected'
        notify_refresh_user()
    }

    function on_disconnected(evt) {
        vm.status='disconnected'
    }

    // receive a message though the websocket from the server
    function receiveMessage(msg) {
		    msg = JSON.parse(msg)
		    if (msg.op=='notify_refresh_user'){
			    var find=false
			    for(i in vm.users){
				    user = vm.users[i]
				    if(user.id==msg.id){
					    user.name=msg.name
					    user.online = true
					    find=true
					    break
				    }
			    }
			    if(!find){
				    msg.online=true
				     vm.users.push(msg)
			    }
			   
		    }else{
			     vm.msgs.push( msg)
				    Vue.nextTick(function () {
				    	$('#msg_div').scrollTop($("#msg_div")[0].scrollHeight)
				    })
		    }
		   

    }
});

	</script>

	
	<style type="text/css" media="screen" id="test">
		#talk{
			width:600px;
			/*display: flex;*/
		}
		#msg_div{
			height:400px;
			overflow: auto;
		}
		.small_input{
			width:200px;
		}
		#edit .input-wrap{
			margin-right: 140px;
		}
		#edit .btn{
			width:130px;
			float: right;
		}
	@media ( max-width: 736px) {
		#talk{
			width:100%;
		}
	}
	</style>
	</head>
	<body>
		<div id="talk" class="test">
			<div id='msg_div'>
			<ul>
				<li v-for='msg in msgs' track-by="$index">
					<b v-text='msg.name'></b>
					<div><span class="test" v-text='msg.content'></span></div>
					
				</li>
			</ul>
		</div>

		<div>
			
		</div>
		<label for="yourname">名字</label>
		<input type="text" id="yourname" v-model='name' class="form-control small_input"/><br>
		<label for="content">内容</label>
		<div id='edit'>
			<button name="test" type="button"  @click='send()' class="btn btn-success">send message</button>
			<div class='input-wrap'>
				<input class="form-control" type="text"  v-model='crt_msg' @keyup.enter='send()'/>
			</div>
			
		</div>
		
		<label >状态</label>
		<span v-text='status'></span>
		<div>
			<span>在线</span>
			<ul>
				<li v-for='user in users'>
					<span v-text='user.name'></span></li></ul>
		</div>
		</div>
	
	</body>
</html>